<template>
  <div class="boke">
    <!-- <h3>底部的播客 歌手页面</h3> -->
    <!-- <h3>artists</h3> -->
    <!-- <FooterMusicVue></FooterMusicVue> -->
    <div class="topone">
      <div class="back" @click="back()">
        <svg class="icon bofang" aria-hidden="true">
          <use xlink:href="#icon-direction-left"></use>
        </svg>
      </div>
      <div class="classify">
        <h2>歌手分类</h2>
      </div>
    </div>
    <div class="allsinger">
      <div class="psing"><p>全部歌手</p></div>
      <div class="filtrate">
        <div class="icontwo">
          <van-icon name="filter-o" size="20px" />
        </div>
        <div class="span">
          <span>筛选</span>
        </div>
      </div>
    </div>
    <hr />
    <div class="isthesinger">
      <ul class="isallsin">
        <li
          class="singer-item"
          v-for="(item, index) in singerListData"
          :key="index"
          @click="ViewSingSong(item.id)"
        >
          <div class="s-img">
            <img class="auto-img" :src="item.picUrl" alt="" />
          </div>
          <div class="author">
            <div class="singname">
              <div class="s-name">{{ item.name }}</div>
              <div class="singico">
                <van-icon name="user-circle-o" size="10px" color="#fc011a" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- <div class="s-list">
      <div
        class="s-list-item"
        v-for="(item, index) in singerListData"
        @click="viewSingerSong(item.id)"
        :key="index"
      >
        <ListItem :singer-data="item" />
      </div>
    </div> -->
  </div>
</template>

<script>
import FooterMusicVue from "../components/item/FooterMusic.vue";
import { mapMutations } from "vuex";

import ListItem from "../components/ListItem.vue";
export default {
  name: "Boke",
  components: {
    ListItem,
    // FooterMusicVue,
  },
  data() {
    return {
      singerListData: [],
    };
  },
  //生命周期钩子
  created() {
    this.getSingerList();
  },
  methods: {
    ...mapMutations(["setIsMain"]),

    getSingerList() {
      this.axios({
        method: "get",
        // url: '/personalized',
        url: "artist/list",
        params: {
          //       //歌手类型: -1:全部 1:男歌手 2:女歌手 3:乐队
          type: -1,
          //       //歌手的地区: -1:全部 7华语 96欧美 8:日本 16韩国 0:其他
          area: 7,
          //获取数据量
          limit: 20,
          //数据偏移数据量
          offset: 0,
        },
      })
        .then((res) => {
          console.log("res==>", res);
          this.singerListData = res.data.artists;
          console.log("this.singerListData==>", this.singerListData);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    back() {
      this.$router.back();
    },

    // Access-Control-Allow-Origin

    //重要步骤携带参数跳转  可以查看歌手的歌曲
    ViewSingSong(id) {
      this.setIsMain(false);
      //跳转 接受一个id参数 路由那边也要写
      this.$router.push({ name: "Singsong", params: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
.boke {
  .topone {
    display: flex;
    align-items: center;
    margin: 0 10px 10px 10px;
    .back {
      margin-right: 10px;
    }
  }
  .classify {
    margin: 0;
  }
  .allsinger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 10px;
    .psing {
      p {
        font-weight: 900;
        font-size: medium;
      }
    }
    .filtrate {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icontwo {
        margin-right: 8px;
      }
      .span {
        font-size: medium;
        font-weight: 500;
      }
    }
  }
  hr {
    opacity: 0.8;
  }
  .isthesinger {
    margin-bottom: 50px;
    .isallsin {
      

      .singer-item {
        display: flex;
        padding: 5px 10px;
        background-color: white;
        margin-bottom: 10px;
        .s-img {
          border-radius: 50%;

          width: 40px;
          height: 40px;
          background-color: #ddd;
          overflow: hidden;
          box-sizing: border-box;
        }
        .author {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 6px;
          .singname {
            display: flex;
            align-items: center;

            .s-name {
              margin-right: 5px;
              font-size: medium;
              font-weight: 900;
            }
          }
        }
      }
    }
  }
}
</style>
